<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="JavaScript" src="../js/jquery-1.4.4.js"></script>
<style>
	html,body{width:100%; height:100%; overflow:hidden; margin:0px; padding:0px;}
	.hidden{ display:none;}
	h2{ font-family:黑体;}
	p{ font-size:16px; font-weight:bolder; text-indent:32px;}
	#continue .option {
	display:block;
	width:150px;
	height:45px;
	text-align:center;
	line-height:45px; 
	margin-left:30px; 
	cursor:pointer;
	text-decoration:none; 
}

#continue a:link,a:visited{
  border:none;
}
#continue a:hover{
	border:#000 solid 1px;
}
</style>
</head>

<body>
	<div id="picture"   title="点击图片查看文本" >
		<img style="display:block; position:absolute; width:100%; height:100%; z-index:1;" src="5_1.jpg"/>
	</div>
	<div id="text" style="display:none; position:absolute; width:100%; height:100%; z-index:2;"  title="点击文本查看图片" >
		<p>公历是一种纯粹的太阳历，制定的主要依据就是地球绕太阳的运行情况。所谓年，指的是地球上的一个寒暑周期，即“回归年”——地球绕太阳转一圈的时间。在农历中，有一个概念与地球公转联系紧密，就是节气。它也是依照地球相对太阳的位置制定的，比如，地球在远日点时恰好是夏至，地球在近日点时恰好是冬至。具体对应关系请参照图片所示。</p>
		<p>公历与节气采取的是相同的参照系——太阳，所以节气与公历日期的对应非常精确，就像“节气歌”中说的：</p>
		<div style="margin-left:32px;">春雨惊春清谷天，夏满芒夏暑相连，秋处露秋寒霜降，冬雪雪冬小大寒。</div>
		<div style="margin-left:32px;">上半年是六廿一，下半年逢八廿三，每月两节日期定，最多不差一两天。</div>
	</div>
	
	<div id="continue" style="display:none; position:absolute; width:400px; height:150px; z-index:3; left:118px; top:60px; background: url(2_1.jpg) #FFF 236px 45px no-repeat; border:solid 5px #000000;">
	<div style=" line-height:50px; text-indent:10px;" >本页念完了，你觉得怎么样？</div>
	<a id="IDontKnow" class="option">说的神马，重听一遍</a>
	<a id="IKnow" class="option" >了解，继续</a>
</div>
	<script>
		
		function soundFinishHander(){
			$("#continue").css("display","block");
		}
		
		$("#picture").click(
			function(){
				$("#picture").css("display","none");
				$("#text").css("display","block");
			}
		);
		$("#text").click(
			function(){
				$("#picture").css("display","block");
				$("#text").css("display","none");
			}
		);
		$("#IDontKnow").click(
			function(){
				parent.gotoPage(5);
			}
		);
		$("#IKnow").click(
			function(){
				parent.gotoPage(6);
			}
		);
		parent.loadSoundHander("mp3/spring5.mp3",soundFinishHander)
	</script>
</body>
</html>
